<template>
	<view class="container">
		<uni-card is-full :is-shadow="false" :border="false">
			<view class="price-tag-body">
				<uni-grid :column="3" :square="false" :highlight="false" @change="changePrice" :showBorder="false">
					<uni-grid-item v-for="(item, index) in priceTagList" :index="index" :key="index">
						<view :class="[item.active ?  'grid-item-box active' : 'grid-item-box']">
							<text class="text">{{ item.price }}元</text>
						</view>
					</uni-grid-item>
				</uni-grid>
				<uni-forms-item label="其他金额:" label-width="110px" label-align="center"
					:required="inputActive ? 'inputActive' : ''">
					<uni-easyinput v-model="otherAmount" :styles="{borderColor:'#4c94d9'}" type="text"
						@focus="otherAmountClick" />
				</uni-forms-item>
				<button type="primary" @click="submitRecharge" :disabled="btn_disabled"
					style="margin-top: 20px;background-color: #4c94d9;margin-left: 3px;margin-right: 5px;border-radius: 0;">确认支付</button>
			</view>
		</uni-card>
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="popup.msgType" :message="popup.msg" :duration="2000"></uni-popup-message>
		</uni-popup>

		<uni-popup ref="arrears" type="dialog">
			<uni-popup-dialog :type="popup2.msgType" cancelText="取消" confirmText="去缴费" title="提醒" :content="popup2.msg"
				@confirm="popup2Confirm" @close="popup2Close"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	// 充值界面
	export default {
		data() {
			return {
				popup: {
					msg: "",
					msgType: "success",
				},
				popup2: {
					msg: "",
					msgType: "error",
				},
				amount: 0,
				openId: "",
				otherAmount: "",
				inputActive: false,
				priceTagList: [],
				btn_disabled: false,
				userInfo: {

				},
			}
		},
		onReady() {
			let that = this;
			uni.getStorage({
				key: 'wx_openid',
				success: function(res) {
					that.openId = res.data
				}
			});
			uni.getSystemInfo({
				success(res) {
					console.log(res)
				}
			});
			uni.request({
				url: that.baseUrl + '/recharge/getRechargePriceTags',
				method: 'POST',
				success(res) {
					if (res.data.type === 'success') {
						let rechargePriceTags = res.data.data;
						that.priceTagList = rechargePriceTags;
						that.amount = rechargePriceTags[0].price;
					} else {
						that.popup.msg = res.data.msg;
						that.popup.msgType = 'error';
						that.$refs.message.open()
					}
				}
			});
		},
		onShow(){
			this.checkArrears();
		},
		methods: {
			otherAmountClick() {
				this.priceTagList.forEach((self, index) => {
					self.active = false;
				});
				this.inputActive = true;
			},
			submitRecharge() {
				let that = this;
				let am = 0;
				let valid = false;
				let reg = /^[1-9]+$/;
				if (that.inputActive) {
					am = Number(that.otherAmount);
					valid = am % 50 === 0;
				} else {
					am = that.amount;
					valid = true;
				}
				if (that.btn_disabled == false) {
					if (valid) {
						that.btn_disabled = true;
						uni.request({
							url: that.baseUrl + '/recharge/create-recharge-order',
							method: 'GET',
							data: {
								amount: am,
								openId: that.openId
							},
							success(res) {
								if (res.data.type === 'success') {
									let orderData = res.data.data;
									that.createPayOrder(orderData);
								} else {
									that.popup.msg = res.data.msg;
									that.popup.msgType = 'error';
									that.$refs.message.open()
									that.btn_disabled = false;
								}
							}
						})
					} else {
						that.popup.msg = "金额应是50的整数倍";
						that.popup.msgType = 'error';
						that.$refs.message.open()
					}
				}
			},
			createPayOrder(orderData) {
				let that = this;
				uni.request({
					url: that.baseUrl + '/wx/pay/unifiedOrder',
					method: 'GET',
					data: {
						outTradeNo: orderData.orderNo,
						amount: orderData.goodsPrice,
						goodsDescription: orderData.goodsDescription,
						openId: that.openId
					},
					success(res) {
						if (res.data.type === 'success') {
							let orderRes = res.data.data;
							uni.requestPayment({
								provider: 'wxpay',
								nonceStr: orderRes.nonceStr,
								package: orderRes.package_,
								timeStamp: orderRes.timeStamp,
								signType: orderRes.signType,
								paySign: orderRes.paySign,
								success: function(res) {
									that.popup.msg = "充值成功";
									that.popup.msgType = 'success';
									that.$refs.message.open();
									that.btn_disabled = false;
								},
								fail: function(err) {
									let msg = "充值失败"
									if (err.errMsg === 'requestPayment:fail cancel') {
										msg = "您已取消支付"
									}
									that.popup.msg = msg;
									that.popup.msgType = 'error';
									that.$refs.message.open();
									that.btn_disabled = false;
								}
							});
						} else {
							that.popup.msg = res.data.msg;
							that.popup.msgType = 'error';
							that.$refs.message.open()
							that.btn_disabled = false;
						}
					}
				})
			},
			changePrice(e) {
				let that = this;
				that.priceTagList.forEach(function(item, index) {
					if (index === e.detail.index) {
						that.priceTagList[index].active = true;
						that.amount = that.priceTagList[index].price;
					} else {
						that.priceTagList[index].active = false;
					}

				});
				that.inputActive = false;
			},
			checkArrears() {
				let that = this;
				uni.getStorage({
					key: 'wx_openid',
					success: function(res) {
						that.openId = res.data;
						uni.request({
							url: that.baseUrl + '/wx/user/getCustomerInfo',
							data: {
								openid: that.openId
							},
							success(res) {
								if (res.data.type === 'success') {
									let oa = res.data.data.owedAmount;
									if (Number(oa) > 0) {
										that.btn_disabled = false;
										that.popup2.msg = '当前存在欠费' + oa + '元,缴费后才能充值！';
										that.$refs.arrears.open();
									}
								}
							}
						})
					},
				})
				
			},
			popup2Close() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			popup2Confirm() {
				uni.navigateTo({
					url: '/pages/personal/payArrears'
				});
			}
		}
	}
</script>

<style>
	.price-tag-body {
		margin-top: 30%;
	}

	.uni-grid-item__box {
		padding: 3px;
	}

	.grid-item-box {
		display: flex;
		justify-content: center;
		height: 49px;
		border: 2px solid #4c94d9;
		color: #4c94d9;
	}

	.grid-item-box text {
		display: flex;
		align-items: center;
		font-size: 1rem;
	}

	.active {
		background-color: #4c94d9;
		color: white;
	}

	.uni-forms-item {
		padding-left: 3px;
		padding-right: 5px;
		padding-top: 10px;
	}

	.uni-forms-item__label {
		height: 49px !important;
		border-left: 2px solid #4c94d9 !important;
		border-top: 2px solid #4c94d9 !important;
		border-bottom: 2px solid #4c94d9 !important;
		border-right: 0 !important;
		padding: 0 0 0 0 !important;
		justify-content: center !important;
	}

	.uni-easyinput__content {
		height: 49px;
	}

	.is-input-border {
		border-radius: 0 !important;
		border-top: 2px solid #4c94d9 !important;
		border-bottom: 2px solid #4c94d9 !important;
		border-right: 2px solid #4c94d9 !important;
		border-left: 0 !important;
	}

	.inputActive {
		font-size: 15px !important;
		font-weight: 600;

	}
</style>